//页面中的数据
var data = [
  {
    number: "20200201",
    time: "2020/02/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "200",
    orderStatus: "待发货",
    operation: "查看订单",
    orderShipment: "订单发货",
  },
  {
    number: "20200202",
    time: "2020/03/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "200",
    orderStatus: "待发货",
    operation: "查看订单",
    orderShipment: "订单发货",
  },
  {
    number: "20200203",
    time: "2020/04/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "300",
    orderStatus: "待收货",
    operation: "查看订单",
    orderShipment: "确认收货",
  },
  {
    number: "20200204",
    time: "2020/05/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "200",
    orderStatus: "待收货",
    operation: "查看订单",
    orderShipment: "确认收货",
  },
  {
    number: "20200205",
    time: "2020/06/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "100",
    orderStatus: "已完成",
    operation: "查看订单",
    orderShipment: "订单追踪",
  },
  {
    number: "20200206",
    time: "2020/07/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "200",
    orderStatus: "已完成",
    operation: "查看订单",
    orderShipment: "订单追踪",
  },
  {
    number: "20200207",
    time: "2020/08/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "260",
    orderStatus: "待收货",
    operation: "查看订单",
    orderShipment: "确认收货",
  },
  {
    number: "20200208",
    time: "2020/09/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "200",
    orderStatus: "待发货",
    operation: "查看订单",
    orderShipment: "订单发货",
  },
  {
    number: "20200209",
    time: "2020/10/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "220",
    orderStatus: "已完成",
    operation: "查看订单",
    orderShipment: "订单追踪",
  },
  {
    number: "20200210",
    time: "2020/11/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "400",
    orderStatus: "待发货",
    operation: "查看订单",
    orderShipment: "订单发货",
  },
  {
    number: "20200211",
    time: "2020/12/07 21:00:00",
    tel: "18812341231",
    name: "田田",
    cost: "200",
    orderStatus: "待发货",
    operation: "查看订单",
    orderShipment: "订单发货",
  },
];
var priceX = document.querySelector(".price-x");
var returnBtn = document.querySelector(".return-btn");
var oShow = document.querySelector(".show-box");
var lineItem = document.querySelector(".line-item");
var recordImg = document.querySelector(".record-img");
var recordNone = document.querySelector(".record-none");
//待支付
var oUnpaid = document.querySelector("#allOptions");
//当前的页码
var page = 1;
//每页的条数
var count = 10;
//共计多少条数据
var totalOf = document.querySelector(".total-of");
//获取tbody
var oTBody = document.querySelector("tbody");
//批量删除
var oBatchDel = document.querySelector(".batchDel");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");
//页面初始化的渲染功能var a=0;
//获取搜索的输入框
var oSearchInp = document.querySelector(".searchInp");
// console.log(oSearchInp);
//获取搜索按钮
var oSearchBtn = document.querySelector(".searchBtn");
//开始和结束时间框
var inputDate = document.querySelector("#inputdate");
var inputDate1 = document.querySelector("#inputdate1");
//获取重置按钮
var oResetBtn = document.querySelector(".resetBtn");

//重置事件
oResetBtn.addEventListener("click", resetFn);
function resetFn() {
  oSearchInp.value = "";
  inputDate.value = "";
  inputDate1.value = "";
  render();
}

//筛选事件
oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  page = 1;
  render();
}
// console.log(oSearchInp.value)

//条件
var conditions = "全部";

//渲染函数
function render() {
  //代表开始和结束时间
  var startTime =
    inputDate.value == ""
      ? new Date("1992-1-1").getTime()
      : new Date(inputDate.value).getTime();
  var endTime =
    inputDate1.value == ""
      ? new Date().getTime()
      : new Date(inputDate1.value).getTime();
  //代表搜索框的值
  var search = oSearchInp.value; // oSearchInp.value
  // console.log(search);
  var renderData = [];
  if (search.trim() == "") {
    renderData = data;
  } else {
    for (var i = 0; i < data.length; i++) {
      //如果每条数据中的名字里面包含搜索的内容
      if (data[i].number.includes(search) || data[i].tel.includes(search)) {
        //就把符合条件的内容放进渲染的数据中
        renderData.push(data[i]);
      }
    }
  }
  // console.log(renderData);

  var renderData2 = [];
  for (var i = 0; i < renderData.length; i++) {
    // console.log(new Date(renderData[i].time).getTime());
    // console.log(startTime);
    if (
      new Date(renderData[i].time).getTime() >= startTime &&
      new Date(renderData[i].time).getTime() <= endTime
    ) {
      renderData2.push(renderData[i]);
    }
  }
  // console.log(renderData2);

  var renderData3 = [];
  if (conditions == "全部") {
    renderData3 = renderData2;
  } else {
    for (var i = 0; i < renderData2.length; i++) {
      // console.log(renderData2[i].orderStatus, conditions);
      if (renderData2[i].orderStatus == conditions) {
        renderData3.push(renderData2[i]);
      }
    }
  }

  // console.log(renderData3);

  //让table为空
  oTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = renderData3.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    //创建tr
    var oTr = document.createElement("tr");
    //给tr创建内容
    oTr.innerHTML = `
        <td>${renderArr[i].number}</td>
        <td>${renderArr[i].time}</td>
        <td>${renderArr[i].tel}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].cost}</td>
        <td>${renderArr[i].orderStatus}</td>
        <td  id="td1"><span class="operation">${renderArr[i].operation}</span><span class="shipment-status">${renderArr[i].orderShipment}</span></td>     
    `;
    //把tr创建到tbody里面
    oTBody.appendChild(oTr);
    //共计多少条数据
    totalOf.innerHTML =
      "共" +
      Math.ceil(renderData3.length / count) +
      "页/" +
      renderData3.length +
      "条数据";
  }

  //渲染页码
  //找到所有的1，2，3，4的页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  //根据数据的长度重新创建页码
  for (var i = 1; i <= Math.ceil(renderData3.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.classList.add("active");
    }
    //在下一页的前面插入页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
//一上来就渲染一次数据。全部数据
render();

//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  //如果当前点击的按钮有pageBtn这个class名字
  if (event.target.className == "pageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}
//隐藏查看订单
returnBtn.onclick = function () {
  oShow.style.display = "block";
  lineItem.style.display = "none";
  confirmReceiptAmmo.style.display = "none";
  orderTracking.style.display = "none";
  deliverGoods.style.display = "none";
};

// 删除和查看问诊单功能
oTBody.addEventListener("click", del);
function del() {
  //查看订单
  if (event.target.className.includes("operation")) {
    oShow.style.display = "none";
    confirmReceiptAmmo.style.display = "none";
    orderName.innerHTML =
      event.target.parentNode.previousElementSibling.innerHTML;
    // console.log(event.target.parentNode.previousElementSibling);
    stateName.innerHTML =
      event.target.parentNode.previousElementSibling.innerHTML;
    priceX.innerHTML =
      event.target.parentNode.previousElementSibling.previousElementSibling.innerHTML;
    lineItem.style.display = "block";
    //订单收发货确认
    if (orderName.innerHTML == "已完成") {
      confirmationBtn.style.display = "none";
      screeningx2.style.display = "block";
    } else {
      screeningx2.style.display = "none";
      confirmationBtn.style.display = "block";
      confirmationBtn.innerHTML = event.target.nextElementSibling.innerHTML;
    }
  }
  if (event.target.className.includes("shipment-status")) {
    if (event.target.innerText == "确认收货") {
      confirmReceiptAmmo.style.display = "block";
    } else {
      if (event.target.innerText == "订单追踪") {
        orderTracking.style.display = "block";
      } else {
        deliverGoods.style.display = "block";
      }
    }
    // console.log(event.target.innerText)
  }
}

//配送方式页面
var deliverGoods = document.querySelector(".deliver-goods");
//关闭订单追踪页面
var closeOrderImg = document.querySelector(".close-order-img");
closeOrderImg.addEventListener("click", closeOrderImgFn);
function closeOrderImgFn() {
  orderTracking.style.display = "none";
}
//订单追踪获取
var orderTracking = document.querySelector(".order-tracking");
orderTracking.style.display = "none";

//查看物流获取与事件
var checkLogistics = document.querySelector(".check-logistics");
checkLogistics.addEventListener("click", checkLogisticsFn);
function checkLogisticsFn() {
  orderTracking.style.display = "block";
}
//取消和确认收货窗口按钮
var goodsClose = document.querySelector(".goods-close");
var goodsTure = document.querySelector(".goods-ture");
//收货成功窗口获取
var goodsSuccessfully = document.querySelector(".goods-successfully");
//取消和确认事件
goodsClose.addEventListener("click", goodsCloseFn);
function goodsCloseFn() {
  confirmReceiptAmmo.style.display = "none";
}

goodsTure.addEventListener("click", goodsTureFn);
function goodsTureFn() {
  goodsSuccessfully.style.display = "block";
  confirmReceiptAmmo.style.display = "none";
  //确认后定时关闭
  setTimeout(fn, 1000);
  function fn() {
    goodsSuccessfully.style.display = "none";
  }
}

//物流单号获取
var trackingNumber = document.querySelector(".tracking-number-input input");
//配送方式取消和确认按钮获取
var goodsTure1 = document.querySelector(".goods-ture1");
var goodsClose1 = document.querySelector(".goods-close1");
//取消和确认事件
goodsTure1.addEventListener("click", goodsTure1Fn);
function goodsTure1Fn() {
  if (
    oTit.innerHTML == "请选择物流公司" ||
    trackingNumber.value.trim() == "" ||
    isNaN(trackingNumber.value * 2)
  ) {
    alert("请将信息填写正确");
  } else {
    alert("发货成功");
    deliverGoods.style.display = "none";
    trackingNumber.value = "";
    oTit.innerHTML="请选择物流公司";
  }
}
goodsClose1.addEventListener("click", goodsClose1Fn);
function goodsClose1Fn() {
  deliverGoods.style.display = "none";
}

//关闭配送方式按钮
var deliverInput = document.querySelector(".deliver-goods-top div");
//物流信息获取
var screeningx2 = document.querySelector(".screeningx2");
//打开收发货按钮
var confirmationBtn = document.querySelector(".confirmation-btn");
//确认收货窗口获取
var confirmReceiptAmmo = document.querySelector(".confirm-receipt-ammo");
//关闭确认收货窗口按钮
var closeImg = document.querySelector(".close-img");
//药品收发货事件
confirmationBtn.addEventListener("click", confirmationBtnFn);
function confirmationBtnFn() {
  if (confirmationBtn.innerHTML == "确认收货") {
    confirmReceiptAmmo.style.display = "block";
  } else {
    deliverGoods.style.display = "block";
  }
}

//关闭确认收货窗口事件
closeImg.addEventListener("click", closeImgFn);
function closeImgFn() {
  confirmReceiptAmmo.style.display = "none";
}

//关闭配送方式窗口
deliverInput.addEventListener("click", deliverInputFn);
function deliverInputFn() {
  deliverGoods.style.display = "none";
}

/*
// recordNone.addEventListener("click", recordNoneFn);
// function recordNoneFn() {
//   recordImg.style.display = "none";
// }

// //搜索框2
// var oTit = document.querySelector(".Interrogation-choose");
// console.log(oTit)
// var oLi = document.querySelectorAll("#dropdown0 ul li");

// for (var i = 0; i < oLi.length; i++) {
//   oLi[i].onclick = function () {
//     oTit.innerHTML = this.innerHTML;
//   };
// }

// var oTit1 = document.querySelector(".Interrogation-choose1");
// var oLi1 = document.querySelectorAll("#dropdown1 ul li");

// for (var i = 0; i < oLi1.length; i++) {
//   oLi1[i].onclick = function () {
//     oTit1.innerHTML = this.innerHTML;
//   };
// }

// var oTit2 = document.querySelector(".Interrogation-choose2");
// var oLi2 = document.querySelectorAll("#dropdown2 ul li");

// for (var i = 0; i < oLi2.length; i++) {
//   oLi2[i].onclick = function () {
//     oTit2.innerText = this.innerText;
//   };
// }

// for (var i = 0; i < uDiv.length; i++) {
//   uDiv[i].onclick = function () {
//     for (var i = 0; i < uDiv.length; i++) {
//       uDiv[i].classList.remove("active");
//     }
//     this.classList.add("active");

//   };
// }
// console.log(uDiv);

*/

// var orderPayDate = document.querySelector(".orderPayDate");
//状态
var stateName = document.querySelector(".stateName");
//订单详情
var orderName = document.querySelector(".orderName");
//数据列表抬头获取
var uDiv = oUnpaid.querySelectorAll("div");
// console.log(uDiv)
function oUnpaidFn() {
  for (var j = 0; j < uDiv.length; j++) {
    uDiv[j].classList.remove("active");
  }
  event.target.classList.add("active");
  conditions = event.target.innerText;
  page = 1;
  render();
}
oUnpaid.addEventListener("click", oUnpaidFn);

//物流公司切换
var oTit = document.querySelector(".Interrogation-choose");
var oLi = document.querySelectorAll("#dropdown0 ul li");

for (var i = 0; i < oLi.length; i++) {
  oLi[i].onclick = function () {
    oTit.innerText = this.innerText;
  };
}
/* 
        每页是5条  count
        data  
    1   0-5
    2   5-10
    3   10-15
    n   (n-1)*count   n*count
-----------------------------
        data  每页是5条  count 
    
    1    1
    5    1
    6    2
    10   2
    11   3
    n    Math.ceil(n/count)
 */
